Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2018, 23:27
Новичок на форуме
Отправить личное сообщение для heros79 Посмотреть профиль Найти все сообщения от heros79
 
Регистрация: 28.05.2018
Сообщений: 5

Не работает div.style.backgroun = url('');
Получаю данные с сервера json

{"brandList":[{"id":3,"productBrandName":"IKEA"}],
"categoryList":[{"id":3,"categoryName":"household"},{"id":6,"categ oryName":"test"}],
"typeList":[{"id":3,"productTypeName":"soap"},{"id":4,"product TypeName":"soap1"},{"id":5,"productTypeName":"soap 2"},{"id":7,"productTypeName":"ghgh"}],
"productList":[{"productID":6,"productName":"Good Soap","productImageFilePath":"media.gettyimages.co m/photos/colorful-powder-explosion-picture-id550582551","productVendorCode":"qwe","productPri ce":15056.0,"productDescription":"This is a good soap by Armenian brand","productCategoryDto":null,"productTypeDto": null,"productBrandDto":null,"productsActionDto":nu ll},{"productID":7,"productName":"wer","productIma geFilePath":"media.gettyimages.com/photos/colorful-powder-explosion-picture-id550582551","productVendorCode":"wer","productPri ce":156.35,"productDescription":"wer","productCate goryDto":null,"productTypeDto":null,"productBrandD to":null,"productsActionDto":null}]}

все работает только div.style.backgroun = url('переменная'); обращается к картинке через мой localhost

Request URL: http://localhost:63342/lad/src/main/...re-id550582551

ниже код страницы

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    [JS]<script>
       var data;
        function getList() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    data = JSON.parse(this.responseText);
                    var category = document.getElementById('searchByCategory');
                    var type = document.getElementById('searchByType');
                    var brand = document.getElementById('searchByBrand');
                    var product = document.getElementById('catalog');
                    for (var i = 0; i < data.categoryList.length; i++) {
                        var opt = document.createElement("option");
                        opt.text = data.categoryList[i].categoryName;
                        category.options.add(opt, i + 1);
                    }
                    for (var i = 0; i < data.typeList.length; i++) {
                        var opt = document.createElement("option");
                        opt.text = data.typeList[i].productTypeName;
                        type.options.add(opt, i + 1);
                    }
                    for (var i = 0; i < data.brandList.length; i++) {
                        var opt = document.createElement("option");
                        opt.text = data.brandList[i].productBrandName;
                        brand.options.add(opt, i + 1);
                    }
 
                    for (var i = 0; i < data.productList.length; i++) {
                        var item_div = document.createElement("div");
                        item_div.className = "item";
                        var item_div_productName = document.createElement("div");
                        var item_div_productImage = document.createElement("div");
                        var item_div_productPrice = document.createElement("div");
                        var image_url = data.productList[i].productImageFilePath;
                        item_div_productImage.style.background = 'url(' + image_url +')';
                        item_div_productImage.style.visibility = "visible";
                        item_div_productName.innerHTML = data.productList[i].productName;
                        item_div_productName.style.visibility = "visible";
                        item_div_productPrice.innerHTML = data.productList[i].productPrice;
                        item_div_productPrice.style.visibility = "visible";
                        item_div.appendChild(item_div_productImage);
                        item_div.appendChild(item_div_productName);
                        item_div.appendChild(item_div_productPrice);
                        product.appendChild(item_div);
                    }
                }
            };
            xhttp.open("GET", "http://localhost:8080//test", true);
            xhttp.send();
        }
 
    </script>[/JS]
    <link rel="stylesheet" type="text/css" href="../../resources/css/index.css">
</head>
<body onload="getList()">
 
<div class="searchBlock">
 
    <div>
        <select id="searchByCategory">
            <option value="default">--||--</option>
        </select>
    </div>
 
    <div>
        <select id="searchByType">
            <option value="default">--||--</option>
        </select>
    </div>
 
    <div>
        <select id="searchByBrand">
            <option value="default">--||--</option>
        </select>
    </div>
 
</div>
 
<div class="container">
    <div class="catalogs" id="catalog" style="visibility: hidden">
 
 
    </div>
</div>
 
 
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2018, 00:23
Новичок на форуме
Отправить личное сообщение для heros79 Посмотреть профиль Найти все сообщения от heros79
 
Регистрация: 28.05.2018
Сообщений: 5

вернее прибавляь путь самого html файла к пути картинки
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2018, 00:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

heros79,
попробуйте так
item_div_productImage.style.backgroundImage = 'url("https://' + image_url +'")';
Ответить с цитированием
  #4 (permalink)  
Старый 29.05.2018, 00:40
Новичок на форуме
Отправить личное сообщение для heros79 Посмотреть профиль Найти все сообщения от heros79
 
Регистрация: 28.05.2018
Сообщений: 5

рони,
спасибо большое но почему ошибка обьясните если не трудно?
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2018, 01:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

heros79,
для background надо указать все параметры, иначе вы их "стираите".
item_div_productImage.style.background = 'rgba(0, 0, 0, 0) url("https://'+image_url+'") repeat scroll 0% 0% / cover padding-box border-box';
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2018, 01:17
Новичок на форуме
Отправить личное сообщение для heros79 Посмотреть профиль Найти все сообщения от heros79
 
Регистрация: 28.05.2018
Сообщений: 5

рони,
Да но стирание параметров почему приводит к добавлению пути файла к пути картинки
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2018, 01:21
Новичок на форуме
Отправить личное сообщение для heros79 Посмотреть профиль Найти все сообщения от heros79
 
Регистрация: 28.05.2018
Сообщений: 5

рони,
и самое интересное на другом компе все работало
Ответить с цитированием
  #8 (permalink)  
Старый 29.05.2018, 01:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

Сообщение от heros79
Да но стирание параметров почему приводит к добавлению пути файла к пути картинки
не приводит, путь добавится в любом случае, если ссылка будет не полной.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает выпадающее меню - ошибка jquery.onepagenav.js greengo86 jQuery 10 29.11.2016 08:20
Не работает скрипт в отдельном файле. ureech AJAX и COMET 0 06.06.2016 11:06
AddEventListener не правильно работает с классами Flakky Events/DOM/Window 2 27.05.2016 13:51
Не работает всплывающая форма на второстепенных страницах denjer Javascript под браузер 0 22.04.2016 21:30
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03